<template>
  <div>
    <el-dialog
      title="搜索文章"
      :visible="searchDialog"
      width="50%"
      center
      append-to-body
      :modal="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="close"
    >
      <!-- 搜索框 -->
      <div class="search-input">
        <el-input
          @input="searchInput"
          prefix-icon="el-icon-search"
          placeholder="请输入要查询的文章标题和内容"
          type="text"
          v-model="searchContent"
        >
        </el-input>
      </div>
      <!-- 搜索结果文章展示 -->
      <div class="search-result">
        <HR
          style="border: 2px dashed #d2ebfd; margin: 20px 0"
          width="100%"
          size="1"
        ></HR>
        <div class="search-result-hitsCount" v-show="hitsCount >= 0">
          已为您查找到{{ hitsCount }}条
          <span style="font-weight: bold">{{ searchContent }}</span>
          博客信息
        </div>
        <div class="search-result-scroll">
          <div
            class="search-result-article"
            v-for="article in searchArticle"
            :key="article.articleId"
          >
            <!-- 查找的文章标题 -->
            <h2
              class="search-result-article-title"
              v-html="article.articleTitle"
              @click="routeBlog(article)"
            ></h2>
            <!-- 查找文章的 描述 -->
            <div
              class="search-result-article-content"
              v-html="article.articleDescription"
              @click="routeBlog(article)"
            ></div>
          </div>
          <!-- 查询不到显示 -->
          <div class="search-result-article" v-if="noArticle">
            <!-- 查找的文章标题 -->
            <div class="search-result-article-content">
              找不到内容："
              <span style="font-weight: bold">{{ searchContent }}</span>
              "
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ArticleApiRequest from "@/api/ArticleApiRequest";
const articleApiRequest = new ArticleApiRequest();
export default {
  props: {
    searchDialog: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      searchContent: "",
      searchArticle: [],
      hitsCount: -1,
      noArticle: false,
    };
  },
  methods: {
    close() {
      this.$emit("closeSearch", false);
      this.searchContent = "";
      this.searchArticle = null;
      this.hitsCount = -1;
      this.noArticle = false;
    },
    async searchInput() {
      if (this.searchContent.split(" ").join("").length == 0) {
        this.noArticle = true;
        this.hitsCount = 0;
        this.searchArticle = null;
        return;
      }

      let data = {
        keyWord: this.searchContent,
      };
      articleApiRequest.searchArticle(data).then((res) => {
        if (res.code === 0) {
          this.searchArticle = res.data.articleList;
          this.hitsCount = res.data.hitsCount;
          if (this.hitsCount === 0) {
            this.noArticle = true;
          } else {
            this.noArticle = false;
          }
        }
      });
    },
    routeBlog(article) {
      let articleAuthorInfo = {
        articleAuthorAvatar: article.articleAuthorAvatar,
        articleAuthorName: article.articleAuthorName,
        articleCreateTime: article.articleCreateTime,
        articleLikeCount: article.articleLikeCount,
        articleView: article.articleView,
      };
      this.$emit("closeSearch", false);
      this.$router.push({
        name: "blog",
        params: {
          id: article.articleId,
          articleAuthorInfo,
        },
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  border-radius: 20px !important;
}

.search-result {
  .search-result-article {
    padding: 20px;
    border: 1px solid #d1d2d3;
    border-radius: 5px;
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
    margin: 30px 0;

    .search-result-article-title {
      padding: 15px 20px 20px 20px;
      font-size: 16px;
      flex-wrap: wrap;
      border-bottom: 1px solid #d2d3d4;
      cursor: pointer;
    }
    .search-result-article-content {
      font-size: 16px;
      padding: 20px;
      flex-wrap: wrap;
      cursor: pointer;
    }
    &:hover {
      transition: all 0.2s; // 表示进入 hover 状态时，0.2s 内完成变换
      box-shadow: 0.1px 0px 1px rgba(0, 0, 0, 0.053),
        0.3px 0.1px 2.6px rgba(0, 0, 0, 0.075),
        0.7px 0.2px 5.3px rgba(0, 0, 0, 0.095),
        1.5px 0.4px 11px rgba(0, 0, 0, 0.117), 4px 1px 30px rgba(0, 0, 0, 0.17);
      cursor: pointer;
    }
  }
  .search-result-hitsCount {
    padding: 0 0 20px 0;
    font-size: 14px;
  }
  .search-result-scroll {
    height: 300px;
    padding: 20px 50px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .search-result-scroll::-webkit-scrollbar {
    display: none;
  }
}
</style>
